
<script>
import C1 from "./slots/1.vue";
import C2 from "./slots/2.vue";
import C3 from "../form/edit/slots/3.vue";
import C4 from "../form/edit/slots/4.vue";
import C5 from "./slots/5.vue";
import C6 from "./slots/6.vue";
import C7 from "./slots/7.vue";
import C8 from "./slots/8.vue";
import C9 from "../form/edit/slots/9.vue";
import C10 from "../form/edit/slots/10.vue";
import C11 from "../form/edit/slots/11.vue";
export default {
  components: {
    C1,
    C2,
    C3,
    C4,
    C5,
    C6,
    C7,
    C8,
    C9,
    C10,
    C11,
  },
  props: ["node"],
  watch: {
    "node.show": {
      handler(n, o) {
        if (!n) {
          this.node.answer instanceof Array
            ? this.node.answer.splice(0, this.node.answer.length)
            : null;
          typeof this.node.answer == "string"
            ? (this.node.answer = null)
            : null;
        }
      },
    },
  },
  data() {
    return {
      type: [null, "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C10","C11"],
    };
  },
  render(h) {
    let Tag = this.type[this.node.type];
    return this.node.show ? (
      <span>
        <van-col span={this.node.span}>
          <van-field
            required={this.node.require}
            class="item"
            readonly
            name={this.node.num + ""}
            rules={[{ required: this.node.require, message: "需要填写" }]}
            value={
              this.node.answer instanceof Array
                ? this.node.answer.join("")
                : this.node.answer instanceof Date
                ? this.node.answer.toString()
                : this.node.answer
            }
          >
            <span
              slot="label"
              class="title"
              domPropsInnerHTML={
                "<div>" +
                this.node.num +
                ".</div>" +
                "<div>" +
                this.node.title +
                "</div>"
              }
            ></span>
            <template slot="input">
              <Tag node={this.node}></Tag>
            </template>

            <div slot="right-icon" v-show={this.node.tip} class="tip">
              提示：{this.node.tip}
            </div>
          </van-field>
        </van-col>
      </span>
    ) : null;
  },
};
</script>

<style scoped>
.tip {
  color: #f56c6c;
  font-size: 12px;
}
.item >>> .van-cell__title .title {
  display: flex;
  flex-direction: row;
}
.item {
  display: flex;
  flex-direction: column;
}
.item >>> .van-field__body {
  flex-direction: column;
  align-items: start;
}
.item >>> .van-field__right-icon {
  padding: 0;
}
.item >>> .van-field__label {
  width: 100%;
}
.van-col > .van-cell {
  border-bottom: 1px solid #ebedf0;
}
.item >>> .van-cell__title {
  flex: 1;
}
.item >>> .van-cell__value {
  flex: none;
  float: right;
}
.item >>> .van-cell__value--alone {
  width: 100%;
}
</style>